<template>
  <div class="echarts">
    <div :id="id" class="echarts"></div>
  </div>
</template>

<script>
export default {
  name: "twoWay",
  props: {
    id: {
      type: String,
      default: "MyListBar"
    },
    data: Object,
    height: Number,
    fontSize: {
      type: Number,
      default: 20
    },
    isPercent: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "#fff"
    }
  },
  methods: {
    init() {
      let myechart = echarts.init(document.getElementById(this.id));
      var myData = this.data.ydata;

      var lastYearData = {
        1: this.data.series[0]
      };
      var thisYearData = {
        1: this.data.series[1]
      };
      var timeLineData = [1];
      var option = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          tooltip: {},
          legend: {
            top: "0%",
            left: "40%",
            itemWidth: 10,
            itemHeight: 10,
            icon: "horizontal",
            textStyle: {
              color: "#ffffff",
              fontSize: 16
            },
            data: this.data.names
          },
          grid: [
            {
              show: false,
              left: "5%",
              top: "15%",
              bottom: "8%",
              containLabel: true,
              width: "30%"
            },
            {
              show: false,
              left: "55%",
              top: "15%",
              bottom: "11%",
              width: "0%"
            },
            {
              show: false,
              right: "2%",
              top: "15%",
              bottom: "8%",
              containLabel: true,
              width: "30%"
            }
          ],
          xAxis: [
            {
              type: "value",
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: "bottom",
              axisLabel: {
                show: false,

                textStyle: {
                  color: "white"
                }
              },
              splitLine: {
                show: false
              }
            },
            {
              gridIndex: 1,
              show: false
            },
            {
              gridIndex: 2,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: "bottom",
              axisLabel: {
                show: false,
                interval: 0,

                textStyle: {
                  color: "white"
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: myData
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 16
                }
              },
              data: myData.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: "center"
                  }
                };
              })
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: myData
            }
          ],
          series: []
        },
        options: []
      };
      option.baseOption.timeline.data.push(timeLineData[0]);
      option.options.push({
        series: [
          {
            name: "男性",
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            //  symbol: 'rect',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#2AAEF2"
              }
            },

            data: lastYearData[timeLineData[0]]
          },
          {
            name: "女性",
            type: "bar",
            xAxisIndex: 2,
            yAxisIndex: 2,
            //   symbol: 'rect',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#FFA229"
              }
            },
            // symbolRepeat: true,
            // symbolSize: 14,
            data: thisYearData[timeLineData[0]]
            // animationEasing: 'elasticOut',
            // animationDelay: function (dataIndex, params) {
            //     return params.index * 30 * 1.1;
            // }
          }
        ]
      });
      myechart.setOption(option);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
